<template>
  <div>
    <van-search v-model="value"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch"
                @cancel="onCancel"
                shape="round"
                background='green' />
    <div class="box"
         :style="{
        height:height
      }">
      <ul v-if='value'>
        <li v-for='data in computedList'
            :key='data.cinemaId'>
          <div class="
         left">
            <div class="cinemaName">{{data.name}}</div>
            <div class="cinemaAddress">{{data.address}}</div>
          </div>
          <div class="right">
            <div style="font-size: 0.9375rem;color: #ff5f16;">￥{{data.lowPrice/100}}<span style="font-size:  .625rem;">起</span></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import BetterScroll from 'better-scroll'
export default {
  data () {
    return {
      value: "",
      height: ''
    }
  },
  // 根据输入框输入的值，然后列表来显示出现相对应的影院
  computed: {
    computedList () {
      return this.$store.state.cinemaData.filter(item => item.name.toUpperCase().includes(this.value.toUpperCase()) || item.address.toUpperCase().includes(this.value.toUpperCase()))
    }
  },
  methods: {
    onSearch () {

    },
    // 退回上个页面
    onCancel () {
      this.$router.back()
    }
  },
  mounted () {
    // 滚动条高度
    this.height = document.documentElement.clientHeight - document.getElementsByTagName("footer")[0].offsetHeight - document.getElementsByClassName("van-search")[0].offsetHeight + 'px'
    if (this.value) {
      new BetterScroll('.box', {
        scrollbar: {
          fade: true
        }
      })
    }
    //异步vuex
    if (this.$store.state.cinemaData.length === 0) {
      this.$store.dispatch('getCinemaData', this.$store.state.cityId)
    }


  },

}
</script>
<style lang="scss" scoped>
li {
  padding: 0.9375rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e2e0e0;
  .cinemaName {
    font-size: 0.9375rem;
  }
  .cinemaAddress {
    font-size: 0.8125rem;
    width: 13.2813rem;
    color: #aaaaaa;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .left {
    width: 17.5rem;
  }
}
.box {
  // height 用js来动态赋值，其原理就是整个html的高度减去下面选项卡的高度
  // document.documentElement.clientHeight - document.getElementsByTagName("footer")[0].offsetHeight + 'px'
  overflow: hidden;
  position: relative; //修正滚动条的位置
}
</style>
